<!--
 * @Author: shenya
 * @Date: 2023-09-09 11:02:34
 * @Description: 动态详情
-->
<template>
  <el-dialog
    title="动态详情"
    :visible.sync="visible"
    width="50%"
    append-to-body
  >
    <div class="dynamics">
      <div class="user">
        <div>
          <img
            v-if="detailObj.userAvatar"
            :src="detailObj.userAvatar"
            class="user-img"
          />
        </div>
        <div class="user-all">
          <div>用户昵称：{{ detailObj.userNickname }}</div>
          <div class="user-infor">
            <div class="code">用户编号：{{ detailObj.userCode }}</div>
            <div class="time">创建时间：{{ detailObj.createTime }}</div>
            <div class="user-count collect flex align-items">
              <div class="flex align-items">
                <img src="../../../../public/img/comment.png" />
                <div class="qty">{{ detailObj.commentQty }}</div>
              </div>
              <div class="collect flex align-items">
                <img src="../../../../public/img/collect.png" />
                <div class="qty">{{ detailObj.collectQty }}</div>
              </div>
              <div class="collect flex align-items">
                <img src="../../../../public/img/like.png" />
                <div class="qty">{{ detailObj.likeQty }}</div>
              </div>
              <div class="collect flex align-items">
                <img src="../../../../public/img/view.png" />
                <div class="qty">{{ detailObj.readQty }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="descript">
        <div
          v-if="type !== 'user'"
          class="flex align-items"
        >
          <div>标签：</div>
          <div>
            <el-tag
              v-for="(item, index) in newList"
              :key="index"
            >
              {{ item.label }}
            </el-tag>
          </div>
        </div>
        <div class="flex">
          <div>
            精选状态：{{
              detailObj.choiceFlag === SELECT_STATUS.NOSELECTED
                ? '未精选'
                : '已精选'
            }}
          </div>
          <div class="status">
            置顶状态：{{
              detailObj.topFlag === TOPFLAG.NOTOP ? '未置顶' : '已置顶'
            }}
          </div>
          <div>
            最新置顶时间：{{ detailObj.topStartTime }} -
            {{ detailObj.topEndTime }}
          </div>
        </div>
        <div>
          屏蔽状态：{{
            detailObj.shieldFlag === SHEILD_STATUS.NOSHEILD
              ? '未屏蔽'
              : '已屏蔽'
          }}
        </div>
        <div class="relate flex">
          <div>关联宠物：</div>
          <div
            v-for="(item, index) in detailObj.petList"
            v-if="type === 'user'"
            :key="index"
            class="pet-count flex align-items"
          >
            <img :src="item.avatar" />
            <div class="pet-name">{{ item.nickName }}</div>
          </div>
        </div>
        <div v-if="type === 'user'">位置：{{ detailObj.address }}</div>
        <div v-html="highlightHtml()"></div>
      </div>
    </div>
    <avue-form
      ref="detailform"
      v-model="form"
      :option="formOption"
    >
      <template #votePoints>
        <div
          v-for="(item, index) in form.sharePkList"
          :key="index"
          class="point-container"
        >
          <div>观点{{ index + 1 }}:</div>
          <div style="flex: 1; margin: 0 15px">{{ item.point }}</div>
          <div>
            占比{{ item.per || '0' }}%，{{ item.pointNum || '0' }}人投票
          </div>
          <div style="margin-left: 15px">
            <el-button
              type="text"
              @click="showVoteRecord(item.id)"
            >
              查看投票人员
            </el-button>
          </div>
        </div>
      </template>
      <template #voteDescription>
        <div>{{ form.voteDescription }}</div>
      </template>
    </avue-form>
    <vote-record-dialog
      v-if="showVote"
      :id="recordId"
      v-model="showVote"
    ></vote-record-dialog>
  </el-dialog>
</template>
<script>
import { selectDynamicById } from '@/api/core/dynamic';
import {
  DYNAMIC_TYPE,
  SELECT_STATUS,
  TOPFLAG,
  SHEILD_STATUS,
} from '@/const/type';
import { formOption } from '@/const/crud/community-content/user';
import { remote } from '@/api/admin/dict';
import voteRecordDialog from './voteRecordDialog.vue';
export default {
  components: {
    voteRecordDialog,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
    },
    type: {
      type: String,
    },
  },
  data() {
    return {
      detailObj: {},
      DYNAMIC_TYPE,
      SELECT_STATUS,
      TOPFLAG,
      SHEILD_STATUS,
      form: {},
      tagList: [],
      newList: [],
      formOption: {},
      showVote: false,
      recordId: '',
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.getDetail();
      }
    },
  },
  created() {
    this.selectTag();
  },
  methods: {
    async selectTag() {
      const res = await remote('article_tag');
      this.tagList = res.data.data;
    },
    getDetail() {
      selectDynamicById(this.id).then((res) => {
        this.detailObj = res.data.data;
        this.form = this.detailObj;
        const temp = JSON.parse(this.detailObj.files);
        this.form.files = temp.map((item) => {
          let type = 'mov';
          if (item.type === 'image') {
            type = 'jpg';
          }
          return `${item.url}?.${type}`;
        });
        this.newList = this.tagList.filter((item) => {
          if (res.data.data.labelIds !== null) {
            return JSON.parse(this.detailObj.labelIds).includes(item.id);
          }
        });
        this.formOption = formOption(this.form.voteStatus);
      });
    },
    highlightHtml() {
      const exp = /#([^#]+)#/g;
      let content = this.detailObj.content;
      if (content) {
        content = content.replace(exp, (item) => {
          const newVal = `<span style='color:#419EFF'>${item}</span>`;
          return newVal;
        });
        return '内容：' + content;
      }
      return '';
    },
    showVoteRecord(id) {
      this.recordId = id;
      this.showVote = true;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-tag {
    margin-right: 10px;
  }
}
.dynamics {
  margin-left: 30px;
  .user {
    display: flex;
    align-items: center;
    .user-all {
      line-height: 30px;
      margin-left: 10px;
      .user-infor {
        display: flex;
        .time {
          margin-left: 10px;
        }
        .user-count {
          margin-left: 10px;
          img {
            width: 20px;
            height: 20px;
          }
          .qty {
            margin-left: 5px;
          }
          .collect {
            padding: 0px 10px;
            box-sizing: border-box;
          }
        }
      }
    }
    .user-img {
      width: 50px;
      height: 50px;
      border-radius: 50px;
    }
  }
  .descript {
    line-height: 40px;
    .status {
      padding: 0px 20px;
    }
    .relate {
      .pet-count {
        padding: 0px 10px;
        img {
          width: 30px;
          height: 30px;
          border-radius: 20px;
        }
      }
      .pet-name {
        margin-left: 5px;
      }
    }
  }
}
.point-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
</style>
